<div class="container p-0">
  <div class="row no-gutters">
    <div class="col">
      @if (isLoading) {
        <gf-rule [isLoading]="true" />
      }

      @if (rules !== null && rules !== undefined) {
        @for (rule of rules; track rule.key) {
          <gf-rule
            [categoryName]="categoryName"
            [hasPermissionToUpdateUserSettings]="
              hasPermissionToUpdateUserSettings
            "
            [locale]="locale"
            [rule]="rule"
            [settings]="settings?.[rule.key]"
            (ruleUpdated)="onRuleUpdated($event)"
          />
        }
      }
    </div>
  </div>
</div>
